/**
 * @description 收藏夹/文章
 */
import style from './styles/Favorite.less';
import classnames from "classnames";
import React from 'react';
import EntryBase from "../Common/EntryBase";
const Fragment = React.Fragment;
import { Button } from 'wd-mobile';
import ArticleItem from 'components/ArticleItem';
import ScrollReachEndContainer from "components/ScrollReachEndContainer";

import { query_my_collect, del_collect } from "api_xukaiyu/app/content";

// img
import img_nolist from "./images/nolist.png";
import icon_close from "images/icon/close.png";

import util from "commons/util";
let query = util.parseQueryString();

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            hasload: false
        }

        // 是否正在加载数据
        this.loading = false;
    }
    componentDidMount() {
        this.query_my_collect();
    }
    render() {
        return (
            <Fragment>
                <ScrollReachEndContainer className={classnames(style.main, "x-scroll-y")} showScrollLoadText={this.state.showScrollLoadText} loadText={this.state.scrollLoadText} onReachEnd={() => {
                    this.reachEnd();
                }}>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <div key={index} className={style.favoriteItem}>
                                    <ArticleItem data={item} />
                                    <img className={style.favoriteItemClose} src={icon_close} alt="" onClick={()=>{
                                        this.del_collect(item.id);
                                    }} />
                                </div>
                            )
                        })
                    }
                    {
                        this.state.list.length <= 0 && !!this.state.hasload && <div className={style.nolist}>
                            <img src={img_nolist} alt="" />
                            <div>列表暂无信息</div>
                        </div>
                    }
                </ScrollReachEndContainer>
                <div className={style.tab}>
                    <div className={style.tabWrapper}>
                        <div onClick={() => {
                            location.replace("./order.html#/Favorite/FavoriteGoods")
                        }} className={classnames(style.tabItem)}><span>商品</span></div>
                        <div className={classnames(style.tabItem, style.tabItemActive)}><span>文章</span></div>
                    </div>
                    <div className={style.tabShadow}></div>
                </div>
            </Fragment>
        )
    }

    // 查询收藏文章
    query_my_collect() {
        query_my_collect({
            page: this.state.page
        }).then(res => {
            const newList = [...this.state.list, ...res.data];
            this.setState({
                showScrollLoadText: newList.length > 0,
                hasload: true,
                page: res.data.length < 1 ? this.state.page : this.state.page + 1,
                list: newList,
                scrollLoadText: res.data.length < 10 ? "没有更多文章" : "正在加载更多文章..."
            })
            this.loading = false;
        })
    }

    // 取消收藏
    del_collect(id, index) {
        del_collect({
            articleId: id
        }).then(res => {
            const newList = [...this.state.list];
            newList.splice(index, 1);
            this.setState({
                list: newList
            })
        })
    }

    // 触底
    reachEnd() {
        if (!this.loading) {
            this.loading = true;
            this.query_my_collect();
        }
    }
}

export default App;